<template>
  <div class="intellectual-brain">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-cpu"></i> 智慧农业大脑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <div class="dashboard-container">
      <!-- Overview Cards -->
      <el-row :gutter="20" class="overview-row">
        <el-col :span="6" v-for="(card, index) in overviewCards" :key="index">
          <el-card shadow="hover" class="dashboard-card">
            <div class="card-icon" :style="{color: card.color}"> 
              <i :class="card.icon"></i> 
            </div>
            <div class="card-content">
              <div class="card-title">{{card.title}}</div> 
              <div class="card-value">{{card.value}}</div> 
              <div class="card-trend" :class="card.trend  > 0 ? 'up' : 'down'">
                <i :class="card.trend  > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                {{Math.abs(card.trend)}}% 
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
 
      <!-- Main Dashboard -->
      <el-row :gutter="20">
        <!-- Left Column -->
        <el-col :span="16">
          <el-card shadow="hover" class="dashboard-section">
            <div slot="header" class="section-header">
              <span><i class="el-icon-data-line"></i> 环境监测总览</span>
            </div>
            <div class="chart-container">
              <div id="env-chart" style="height: 300px;"></div>
            </div>
          </el-card>
        </el-col>
 
        <!-- Right Column -->
        <el-col :span="8">
          <el-card shadow="hover" class="dashboard-section">
            <div slot="header" class="section-header">
              <span><i class="el-icon-warning-outline"></i> 异常预警</span>
            </div>
            <div class="warning-list">
              <div v-for="(alert, index) in alerts" :key="index" class="alert-item">
                <div class="alert-icon" :class="alert.level"> 
                  <i :class="alert.icon"></i> 
                </div>
                <div class="alert-content">
                  <div class="alert-title">{{alert.title}}</div> 
                  <div class="alert-desc">{{alert.description}}</div> 
                  <div class="alert-time">{{alert.time}}</div> 
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
 
      <!-- Bottom Row -->
      <el-row :gutter="20" class="bottom-row">
        <el-col :span="12">
          <el-card shadow="hover" class="dashboard-section">
            <div slot="header" class="section-header">
              <span><i class="el-icon-s-data"></i> 作物生长趋势</span>
            </div>
            <div class="chart-container">
              <div id="growth-chart" style="height: 250px;"></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="dashboard-section">
            <div slot="header" class="section-header">
              <span><i class="el-icon-connection"></i> 设备运行状态</span>
            </div>
            <div class="device-status">
              <div v-for="(device, index) in devices" :key="index" class="device-item">
                <el-progress 
                  :percentage="device.percentage"  
                  :color="device.status  === 'normal' ? '#67C23A' : '#F56C6C'"
                  :show-text="false">
                </el-progress>
                <div class="device-info">
                  <div class="device-name">{{device.name}}</div> 
                  <div class="device-status" :class="device.status"> 
                    <i :class="device.status  === 'normal' ? 'el-icon-success' : 'el-icon-error'"></i>
                    {{device.status  === 'normal' ? '正常' : '异常'}}
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
 
<script>
const echarts = require('echarts');
 
export default {
  data() {
    return {
      overviewCards: [
        { icon: 'el-icon-sunny', title: '光照强度', value: '12500 Lux', trend: 2.5, color: '#FFC107' },
        { icon: 'el-icon-thermometer', title: '平均温度', value: '24.5°C', trend: -1.2, color: '#F44336' },
        { icon: 'el-icon-water-drop', title: '土壤湿度', value: '68%', trend: 3.8, color: '#2196F3' },
        { icon: 'el-icon-cloudy', title: 'CO₂浓度', value: '480 ppm', trend: -0.5, color: '#4CAF50' }
      ],
      alerts: [
        { icon: 'el-icon-warning', title: '温度异常', description: '3号温室温度超过阈值', time: '10分钟前', level: 'high' },
        { icon: 'el-icon-info', title: '灌溉完成', description: '东区滴灌系统已完成灌溉', time: '25分钟前', level: 'medium' },
        { icon: 'el-icon-warning-outline', title: '设备离线', description: '2号气象站连接中断', time: '1小时前', level: 'low' }
      ],
      devices: [
        { name: '1号灌溉系统', percentage: 85, status: 'normal' },
        { name: '2号气象站', percentage: 45, status: 'error' },
        { name: '3号温室控制器', percentage: 92, status: 'normal' },
        { name: '4号施肥机', percentage: 78, status: 'normal' }
      ]
    }
  },
  mounted() {
    this.initCharts(); 
  },
  methods: {
    initCharts() {
      // Environment Chart 
      const envChart = echarts.init(document.getElementById('env-chart')); 
      envChart.setOption({ 
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['温度', '湿度', '光照', 'CO₂']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true 
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
        },
        yAxis: [
          {
            type: 'value',
            name: '温度(°C)',
            position: 'left'
          },
          {
            type: 'value',
            name: '其他',
            position: 'right'
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            smooth: true,
            data: [20, 22, 25, 27, 26, 23],
            itemStyle: {
              color: '#F44336'
            }
          },
          {
            name: '湿度',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: [65, 60, 55, 50, 60, 70],
            itemStyle: {
              color: '#2196F3'
            }
          },
          {
            name: '光照',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: [200, 500, 1200, 1500, 1000, 300],
            itemStyle: {
              color: '#FFC107'
            }
          },
          {
            name: 'CO₂',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: [450, 420, 400, 480, 460, 440],
            itemStyle: {
              color: '#4CAF50'
            }
          }
        ]
      });
 
      // Growth Chart 
      const growthChart = echarts.init(document.getElementById('growth-chart')); 
      growthChart.setOption({ 
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['株高', '茎粗', '叶面积']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true 
        },
        xAxis: {
          type: 'category',
          data: ['第1周', '第2周', '第3周', '第4周', '第5周']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '株高',
            type: 'bar',
            stack: 'growth',
            data: [15, 25, 35, 45, 55],
            itemStyle: {
              color: '#8BC34A'
            }
          },
          {
            name: '茎粗',
            type: 'bar',
            stack: 'growth',
            data: [2, 3, 4, 5, 6],
            itemStyle: {
              color: '#795548'
            }
          },
          {
            name: '叶面积',
            type: 'bar',
            stack: 'growth',
            data: [8, 15, 25, 35, 45],
            itemStyle: {
              color: '#CDDC39'
            }
          }
        ]
      });
 
      // Resize charts when window size changes 
      window.addEventListener('resize',  () => {
        envChart.resize(); 
        growthChart.resize(); 
      });
    }
  }
}
</script>
 
<style scoped>
.dashboard-container {
  padding: 20px;
}
 
.overview-row {
  margin-bottom: 20px;
}
 
.dashboard-card {
  display: flex;
  align-items: center;
  height: 120px;
}
 
.card-icon {
  font-size: 40px;
  margin-right: 20px;
  flex-shrink: 0;
}
 
.card-content {
  flex-grow: 1;
}
 
.card-title {
  color: #909399;
  font-size: 14px;
  margin-bottom: 8px;
}
 
.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}
 
.card-trend {
  font-size: 14px;
}
 
.card-trend.up  {
  color: #67C23A;
}
 
.card-trend.down  {
  color: #F56C6C;
}
 
.dashboard-section {
  margin-bottom: 20px;
  min-height: 300px;
}
 
.section-header {
  font-size: 16px;
  font-weight: bold;
}
 
.section-header i {
  margin-right: 8px;
}
 
.warning-list {
  padding: 10px;
}
 
.alert-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}
 
.alert-item:last-child {
  border-bottom: none;
}
 
.alert-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}
 
.alert-icon.high  {
  background-color: #FEF0F0;
  color: #F56C6C;
}
 
.alert-icon.medium  {
  background-color: #FDF6EC;
  color: #E6A23C;
}
 
.alert-icon.low  {
  background-color: #F0F9EB;
  color: #67C23A;
}
 
.alert-content {
  flex-grow: 1;
}
 
.alert-title {
  font-weight: bold;
  margin-bottom: 4px;
}
 
.alert-desc {
  color: #909399;
  font-size: 13px;
  margin-bottom: 4px;
}
 
.alert-time {
  color: #C0C4CC;
  font-size: 12px;
}
 
.device-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
 
.device-item:last-child {
  margin-bottom: 0;
}
 
.device-info {
  margin-left: 15px;
}
 
.device-name {
  font-weight: bold;
  margin-bottom: 4px;
}
 
.device-status {
  font-size: 13px;
}
 
.device-status.normal  {
  color: #67C23A;
}
 
.device-status.error  {
  color: #F56C6C;
}
 
.chart-container {
  width: 100%;
}
</style>